<script setup lang="ts">
import { ref } from "vue";
import { DunningFormProps } from "../utils/types";
import { Delete, Plus, ZoomIn } from "@element-plus/icons-vue";
import { getUploadToken, uploadImage } from "@/api/utils";
const props = withDefaults(defineProps<DunningFormProps>(), {
  formInline: () => ({
    /** 订单号 */
    orderNo: "",
    dunningMethod: "",
    dunningResult: "",
    communicationContent: "",
    dunningTime: "",
    dunningName: "",
    photoId: ""
  })
});
const newFormInline = ref(props.formInline);

/** 图片上传列表 */
function getUploadRef() {
  return uploadRef.value;
}
const userAccept = ".jpg, .png, .jpeg, .webp";
const fileList = ref([]);
const dialogImageUrl = ref("");
const dialogVisible = ref(false);
const disabled = ref(false);
const uploadRef = ref();

const dunningMethodList = [
  {
    label: "电话",
    value: "电话"
  },
  {
    label: "短信",
    value: "短信"
  },
  {
    label: "邮件",
    value: "邮件"
  },
  {
    label: "微信",
    value: "微信"
  },
  {
    label: "QQ",
    value: "QQ"
  }
];

// const handleChange = async () => {
//   // 判断是否存在图片
//   console.log("fileList", fileList.value);
//   if (fileList.value.length == 0) {
//     return;
//   }
// };

/** 自定义图片上传方法 */
const handleUpload = async options => {
  console.log("upload");
  let imgId = options.file.uid;
  console.log("imgId", imgId);
  newFormInline.value.photoId = imgId.toString();
  props.formInline.photoId = imgId.toString(); // 确保同步到props.formInline
  let uploadUrl = await getToken(imgId);
  let res = await uploadImage(uploadUrl, options.file);
  console.log(res);
  return res;
};

/** 获取图片上传令牌 */
const getToken = async imgId => {
  let { data } = await getUploadToken(imgId);
  console.log(data.url);
  return data.url;
};

/** 删除图片钩子 */
const handleRemove = file => {
  fileList.value = [];
  newFormInline.value.photoId = "";
  props.formInline.photoId = ""; // 确保同步到props.formInline
};
/** 图片预览钩子 */
const handlePictureCardPreview = file => {
  dialogImageUrl.value = file.url!;
  dialogVisible.value = true;
};
defineExpose({ getUploadRef });
</script>

<template>
  <el-form ref="ruleFormRef" :model="newFormInline" label-width="96px">
    <el-form-item label="订单号">
      <el-input v-model="newFormInline.orderNo" :disabled="true" />
    </el-form-item>
    <el-form-item label="催款方式">
      <el-select
        v-model="newFormInline.dunningMethod"
        placeholder="请选择催款方式"
      >
        <el-option
          v-for="item in dunningMethodList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="催款结果">
      <el-input v-model="newFormInline.dunningResult" />
    </el-form-item>
    <el-form-item label="催款内容">
      <el-input v-model="newFormInline.communicationContent" />
    </el-form-item>
    <el-form-item label="催款人">
      <el-input v-model="newFormInline.dunningName" />
    </el-form-item>
    <el-form-item label="催款时间">
      <el-date-picker
        v-model="newFormInline.dunningTime"
        type="datetime"
        placeholder="选择催款时间"
      />
    </el-form-item>
  </el-form>

  <!-- 图片上传表单 -->
  <el-form label-width="96px">
    <el-form-item label="催款图片">
      <el-upload
        ref="uploadRef"
        v-model:file-list="fileList"
        :auto-upload="false"
        :accept="userAccept"
        list-type="picture-card"
        :limit="1"
        :http-request="handleUpload"
      >
        <el-icon><Plus /></el-icon>
        <!-- 上传图片操作按钮 -->
        <template #file="{ file }">
          <div>
            <img class="object-contain" :src="file.url" alt="" />
            <span class="el-upload-list__item-actions">
              <span
                class="el-upload-list__item-preview"
                @click="handlePictureCardPreview(file)"
              >
                <el-icon><zoom-in /></el-icon>
              </span>
              <span
                class="el-upload-list__item-delete"
                v-if="!disabled"
                @click="handleRemove(file)"
              >
                <el-icon><Delete /></el-icon>
              </span>
            </span>
          </div>
        </template>
      </el-upload>
    </el-form-item>
  </el-form>
  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
</template>
